<template>
    <div class="bg-content">
        <div class="title">
            <img src="@/assets/home/cricle.png" alt="" class="title-pl" />
            <span class="s-title">
                <span class="title-name">&nbsp;&nbsp;工作情况</span>
            </span>
            <span class="right-light">
<!--                <span class="active">两轮</span>&nbsp;&nbsp;-->
<!--                <span>四轮</span>-->
               <span :class="{ active: currentType === '2' }"  @click="changeStatus('2')">两轮</span>&nbsp;&nbsp;
    <span :class="{ active: currentType === '4' }"   @click="changeStatus('4')">四轮</span>
            </span>
        </div>
        <div class="content">
            <div>
                <div id="echarts2"></div>
            </div>
            <div>
                <div id="echarts3"></div>
            </div>
            <div>
                <div id="echarts4"></div>
            </div>
            <div>
                <div id="echarts5"></div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from "echarts";
import axios from "axios";
export default {
  props: {
    regionId: {
      type: String,
      default: '100000',
    },
  },
  watch: {
    regionId(newVal) {
      //console.log("新的区域IDnnnnnnnnnnnnnnnnnn:", newVal);
      // 在这里可以根据新的区域ID重新请求数据或更新图表
      this.getData();
      this.getregionId(newVal);
    },
    currentType(newVal){
      this.getData();
    }


  },
    data() {
        return {
          currentType : '2', // 默认选中两轮
          all: 0,
          year: 0,
          month: 0,
          day: 0,
          year_ratio: 0,
          month_ratio: 0,
          day_ratio: 0,};
    },
    mounted() {
        this.init1();
        this.init2();
        this.init3();
        this.init4();
        this.getData();
    },



    methods: {
      changeStatus(status) {
        this.currentType = status;
        console.log(this.currentType)
        // 在这里可以添加额外的逻辑，比如根据当前状态更新图表数据
      },
      getData(){
        const two_four = this.currentStatus;
        const regionId =this.regionId;
        if (this.currentType === '2') {
          axios.get(`${this.$httpUrl}two_workstatus?id=${regionId}`)
          // axios.get(`http://localhost:8080/lay/two_workstatus?id=${regionId}`)
              .then(response => {
                const data = response.data; // 从响应中获取数据
                this.all = data.all;
                this.year = data.year;
                this.month = data.month;
                this.day = data.day;
                this.year_ratio = data.year_ratio;
                this.month_ratio = data.month_ratio;
                this.day_ratio = data.day_ratio;
                this.init1(); // 在获取数据后初始化图表
                this.init2(); // 在获取数据后初始化图表
                this.init3(); // 在获取数据后初始化图表
                this.init4(); // 在获取数据后初始化图表
              })
              .catch(error => {
                console.error("获取数据失败:", error);
              });
        }else if (this.currentType === '4') {
          axios.get(`${this.$httpUrl}four_workstatus?id=${regionId}`)
          // axios.get(`http://localhost:8080/lay/four_workstatus?id=${regionId}`)
              .then(response => {
                const data = response.data; // 从响应中获取数据
                this.all = data.all;
                this.year = data.year;
                this.month = data.month;
                this.day = data.day;
                this.year_ratio = data.year_ratio;
                this.month_ratio = data.month_ratio;
                this.day_ratio = data.day_ratio;
                this.init1(); // 在获取数据后初始化图表
                this.init2(); // 在获取数据后初始化图表
                this.init3(); // 在获取数据后初始化图表
                this.init4(); // 在获取数据后初始化图表
              })
              .catch(error => {
                console.error("获取数据失败:", error);
              });
        }
      },
        init1() {
            var Aengin = echarts.init(document.getElementById("echarts2"));

            // 格式化百分比
            const formatPercent = (num) => {
                if (num.toString().indexOf(".") > -1) {
                    let arr = num.toString().split(".");
                    let decimalArr = arr[1].split("");
                    if (decimalArr.length > 2) {
                        return num.toFixed(2);
                    } else {
                        return num;
                    }
                } else {
                    return num;
                }
            };
            let value = 100;
            let total = 100;
            let color = ["#00c63e", "#00c63e"]; //渐变色列表
            let point = value; //在线
            let handred = total; //全部
            Aengin.setOption({
                title: {
                    // text: "{a|" + "总服务车次" + "}{b|}\n{c|6.2万}",
                  text: "{a|" + "总服务车次" + "}{b|}\n{c|" + this.all + "}",
                    x: "center",
                    y: "center",
                    textStyle: {
                        rich: {
                            a: {
                                color: "#FFFFFF",
                                fontSize: "12",
                                fontFamily: "OPPOSans-M",
                            },
                            b: {
                                fontSize: "14",
                                fontFamily: "OPPOSans-R",
                                color: "#FFFFFF",
                                padding: [0, 0, 7, 2],
                            },
                            c: {
                                fontSize: "14",
                                fontFamily: "SourceHanSansCN-Normal",
                                color: "#BDE7FA",
                                padding: [5, 0, 6, 0],
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        hoverAnimation: false,
                        clockWise: true,
                        radius: ["75%", "95%"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        },
                        data: [
                            {
                                value: point,
                                name: "占比",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            // 颜色渐变
                                            type: "linear",
                                            x: 0,
                                            y: 0.2,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: color[0], // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.6,
                                                    // 0% 处的颜色
                                                    color: "rgba(0, 198, 62, 0.8)", // 60% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: color[1],
                                                },
                                            ],
                                        },
                                        label: {
                                            show: false,
                                        },
                                        labelLine: {
                                            show: false,
                                        },
                                    },
                                },
                            },
                            {
                                // 剩余背景透明
                                name: "剩余",
                                z: 1,
                                value: handred - point || 1,
                                itemStyle: {
                                    normal: {
                                        color: "rgba(0, 0, 0, 0)",
                                    },
                                },
                            },
                        ],
                    },
                ],
            });
        },
        init2() {
            var Aengin = echarts.init(document.getElementById("echarts3"));

            // 格式化百分比
            const formatPercent = (num) => {
                if (num.toString().indexOf(".") > -1) {
                    let arr = num.toString().split(".");
                    let decimalArr = arr[1].split("");
                    if (decimalArr.length > 2) {
                        return num.toFixed(2);
                    } else {
                        return num;
                    }
                } else {
                    return num;
                }
            };
            let value = this.year_ratio;
            let total = 100;
            let color = ["#0057ff", "#0057ff"]; //渐变色列表
            let point = value; //在线
            let handred = total; //全部
            Aengin.setOption({
                title: {
                    // text: "{a|" + "年服务车次" + "}{b|}\n{c|6.2万}",
                  text: "{a|" + "年服务车次" + "}{b|}\n{c|" + this.year + "}",
                    x: "center",
                    y: "center",
                    textStyle: {
                        rich: {
                            a: {
                                color: "#FFFFFF",
                                fontSize: "12",
                                fontFamily: "OPPOSans-M",
                            },
                            b: {
                                fontSize: "14",
                                fontFamily: "OPPOSans-R",
                                color: "#FFFFFF",
                                padding: [0, 0, 7, 2],
                            },
                            c: {
                                fontSize: "14",
                                fontFamily: "SourceHanSansCN-Normal",
                                color: "#BDE7FA",
                                padding: [5, 0, 6, 0],
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        hoverAnimation: false,
                        clockWise: true,
                        radius: ["75%", "95%"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        },
                        data: [
                            {
                                value: point,
                                name: "占比",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            // 颜色渐变
                                            type: "linear",
                                            x: 0,
                                            y: 0.2,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: color[0], // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.6,
                                                    color: "#0057ff", // 60% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: color[1], // 100% 处的颜色
                                                },
                                            ],
                                        },
                                        label: {
                                            show: false,
                                        },
                                        labelLine: {
                                            show: false,
                                        },
                                    },
                                },
                            },
                            {
                                // 剩余背景透明
                                name: "剩余",
                                z: 1,
                                value: handred - point || 1,
                                itemStyle: {
                                    normal: {
                                        color: "rgba(0, 0, 0, 0)",
                                    },
                                },
                            },
                        ],
                    },
                ],
            });
        },
        init3() {
            var Aengin = echarts.init(document.getElementById("echarts4"));

            // 格式化百分比
            const formatPercent = (num) => {
                if (num.toString().indexOf(".") > -1) {
                    let arr = num.toString().split(".");
                    let decimalArr = arr[1].split("");
                    if (decimalArr.length > 2) {
                        return num.toFixed(2);
                    } else {
                        return num;
                    }
                } else {
                    return num;
                }
            };
            let value = this.month_ratio;
            let total = 100;
            let color = ["#ff9500", "#ff9500"]; //渐变色列表
            let point = value; //在线
            let handred = total; //全部
            Aengin.setOption({
                title: {
                  text: "{a|" + "月服务车次" + "}{b|}\n{c|" + this.month + "}",
                    // text: "{a|" + "月服务车次" + "}{b|}\n{c|6.2万}",
                    x: "center",
                    y: "center",
                    textStyle: {
                        rich: {
                            a: {
                                color: "#FFFFFF",
                                fontSize: "12",
                                fontFamily: "OPPOSans-M",
                            },
                            b: {
                                fontSize: "14",
                                fontFamily: "OPPOSans-R",
                                color: "#FFFFFF",
                                padding: [0, 0, 7, 2],
                            },
                            c: {
                                fontSize: "14",
                                fontFamily: "SourceHanSansCN-Normal",
                                color: "#BDE7FA",
                                padding: [5, 0, 6, 0],
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        hoverAnimation: false,
                        clockWise: true,
                        radius: ["75%", "95%"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        },
                        data: [
                            {
                                value: point,
                                name: "占比",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            // 颜色渐变
                                            type: "linear",
                                            x: 0,
                                            y: 0.2,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: color[0], // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.6,
                                                    color: "#ff9500", // 60% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: color[1], // 100% 处的颜色
                                                },
                                            ],
                                        },
                                        label: {
                                            show: false,
                                        },
                                        labelLine: {
                                            show: false,
                                        },
                                    },
                                },
                            },
                            {
                                // 剩余背景透明
                                name: "剩余",
                                z: 1,
                                value: handred - point || 1,
                                itemStyle: {
                                    normal: {
                                        color: "rgba(0, 0, 0, 0)",
                                    },
                                },
                            },
                        ],
                    },
                ],
            });
        },
        init4() {
            var Aengin = echarts.init(document.getElementById("echarts5"));

            // 格式化百分比
            const formatPercent = (num) => {
                if (num.toString().indexOf(".") > -1) {
                    let arr = num.toString().split(".");
                    let decimalArr = arr[1].split("");
                    if (decimalArr.length > 2) {
                        return num.toFixed(2);
                    } else {
                        return num;
                    }
                } else {
                    return num;
                }
            };
            let value = this.day_ratio;
            let total = 100;
            let color = ["#3db6b6", "#3db6b6"]; //渐变色列表
            let point = value; //在线
            let handred = total; //全部
            Aengin.setOption({
                title: {
                  text: "{a|" + "日服务车次" + "}{b|}\n{c|" + this.day + "}",
                    // text: "{a|" + "日服务车次" + "}{b|}\n{c|6.2万}",
                    x: "center",
                    y: "center",
                    textStyle: {
                        rich: {
                            a: {
                                color: "#FFFFFF",
                                fontSize: "12",
                                fontFamily: "OPPOSans-M",
                            },
                            b: {
                                fontSize: "14",
                                fontFamily: "OPPOSans-R",
                                color: "#FFFFFF",
                                padding: [0, 0, 7, 2],
                            },
                            c: {
                                fontSize: "14",
                                fontFamily: "SourceHanSansCN-Normal",
                                color: "#BDE7FA",
                                padding: [5, 0, 6, 0],
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        hoverAnimation: false,
                        clockWise: true,
                        radius: ["75%", "95%"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        },
                        data: [
                            {
                                value: point,
                                name: "占比",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            // 颜色渐变
                                            type: "linear",
                                            x: 0,
                                            y: 0.2,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: color[0], // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.6,
                                                    color: "#3db6b6", // 60% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: color[1], // 100% 处的颜色
                                                },
                                            ],
                                        },
                                        label: {
                                            show: false,
                                        },
                                        labelLine: {
                                            show: false,
                                        },
                                    },
                                },
                            },
                            {
                                // 剩余背景透明
                                name: "剩余",
                                z: 1,
                                value: handred - point || 1,
                                itemStyle: {
                                    normal: {
                                        color: "rgba(0, 0, 0, 0)",
                                    },
                                },
                            },
                        ],
                    },
                ],
            });
        },
    },
};
</script>

<style lang="less" scoped>
.bg-content {
    height: calc((100vh - 0.75rem) / 3 - 0.18rem);
    margin-bottom: 0.05rem;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right,#000606, #44c9c9) 1;
    padding: 0.05rem;
    .title {
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        position: relative;
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: left;
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(to right, #3aacac, #000202) 1;
        .title-name {
            font-size: 0.14rem;
        }
        .title-pl {
            position: relative;
            top: 0.05rem;
        }
        .right-light {
            position: absolute;
            right: 0;
            display: inline-block;
            font-size: 0.14rem;
            padding: 0;
            height: 0;
            font-weight: 400;
            span {
                padding: 2px 5px;
                background-color: #091a1a;
                cursor: pointer;
            }
        }
        .active {
            background-image: url("./../../../assets/home/sun.png");
        }
    }
    .content {
        height: calc((100vh - 0.75rem) / 3 - 0.13rem - 0.45rem);
        display: flex;
        flex-wrap: wrap;
        > div {
            height: 50%;
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
       #echarts2{
            box-shadow: 0px 0px 20px #00c63e; /* 阴影效果 */
            border-radius: 50%;
            width: 0.74rem;
            height: 0.74rem;
        }
        #echarts3{
            box-shadow: 0px 0px 20px #0057ff; /* 阴影效果 */
            border-radius: 50%;
            width: 0.74rem;
            height: 0.74rem;
        }
        #echarts4{
            box-shadow: 0px 0px 20px #ff9500; /* 阴影效果 */
            border-radius: 50%;
            width: 0.74rem;
            height: 0.74rem;
        }
        #echarts5{
            box-shadow: 0px 0px 20px #56fefe; /* 阴影效果 */
            border-radius: 50%;
            width: 0.74rem;
            height: 0.74rem;
        }
    }
}
</style>
